<template>
  <view class="goods-detail">
    <view class="goods-thumb">
      <image :src="info.topImage" mode="widthFix" class="thumb"></image>
    </view>
    <view class="goods-info">
      <view class="goods-name">{{ info.goodsName }}</view>
      <view class="goods-price">￥<text>{{ info.shopPrice }}</text></view>
    </view>
    <view class="goods-des">
      <view class="des-title">商品详情</view>
      <view class="des-content">
        <rich-text :nodes="renderContent(info.content)"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        info: {}
      }
    },
    onLoad(query) {
      this.id = query.id
      this.getData()
    },
    methods: {
      getData() {
        this.$http({
          url: `/goods/getGoodsInfo?goodsId=${this.id}`
        }).then(res => {
          this.info = res.data.goodsInfo
          this.setShare()
        })
      },
      renderContent(content) {
        return content ? content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') : ''
      },
      setShare() {
        uni.showShareMenu({
          title: this.info.title,
        })
      }
    },
    onShareAppMessage() {
      return {
        title: this.info.title,
        path: '/pages/goods/detail?id=' + this.id
      }
    },
    onShareTimeline() {
      return {
        title: this.info.title,
        path: 'id=' + this.id
      }
    }
  }
</script>

<style lang="less">
  .goods-detail {
    .goods-thumb {
      width: 100vw;
      .thumb{
        width: 100%;
      }
    }

    .goods-info {
      padding: 20rpx;
      background-color: #fff;
      .goods-name{
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .goods-price{
        color: red;
        font-size: 28rpx;
      }
    }
    .des-title{
      height: 80rpx;
      background-color: #efefef;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
    }
    .des-content{
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      color: #333;
      image{
        width: 100%;
      }
    }
  }
</style>
